<template>
    <TechPopup class="tech-choose-member-card" :title="title" v-model="showChooseCard" @close="close" no-button>
        <MemberCard @click="selectCard" cardId="1" label="总部统一会员体系" name="门店会员卡" :integral="10" :balance="143.22" :discount="7.6" :startPrice="50" is-default />
        <MemberCard @click="selectCard" cardId="2" label="总部统一会员体系" name="门店会员卡" :integral="187" :balance="1999" :discount="8" />
    </TechPopup>
</template>

<script>
import { TechPopup } from '@components/base';
import MemberCard from './MemberCard';
import logger from '@common/logger';
export default {
    name: 'ChooseMemberCard',
    components: {
        TechPopup,
        MemberCard,
    },
    props: {
        title: {
            type: String,
            default: '选择充值会员卡',
        },
        cardList: {
            type: Array,
            default: () => {
                return [];
            },
        },
    },
    computed: {},
    data() {
        return {
            showChooseCard: false,
        };
    },
    methods: {
        show() {
            this.showChooseCard = true;
        },
        close() {
            this.showChooseCard = false;
        },
        selectCard(id) {
            logger.info('选中的card为：', id);
            this.close();
        },
    },
};
</script>

<style lang="less">
    .tech-choose-member-card {
        .tech-member-card {
            .m-b(@gap);
        }
    }
</style>
